<template>
  <div class="coupon-container">
    <div class="coupon-box">
      <div class="coupon-top">
        <div class="coupon-topleft">
          <div class="coupon-discount">
            <p>{{ discount }}<span>元</span></p>
          </div>
          <div class="coupon-threshold">
            <p>{{ threshold }}</p>
          </div>
        </div>
        <div class="coupon-topmid">
          <div class="coupon-name">
            <h4>{{ title }}</h4>
          </div>
          <div class="coupon-date">
            <p>{{ date }}</p>
          </div>
        </div>
        <div class="coupon-topright">
          <van-checkbox v-if="showcheckbox" v-model="checked" checked-color="#ee0a24"></van-checkbox>
        </div>
      </div>
      <div class="coupon-bottom">
        <div class="coupon-description">
          <p>{{ description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'coupon',
  props: {
    discount: {
      type: Number,
      default: 1.5
    },
    threshold: {
      type: String,
      default: '无门槛使用\n最高优惠12元'
    },
    title: {
      type: String,
      default: '优惠券名称'
    },
    date: {
      type: String,
      default: '2017.03.10-2017.12.30'
    },
    description: {
      type: String,
      default: '描述信息'
    },
    showcheckbox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 1,
      checked: false
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-container {
  width: 100%;
  font-size: 14px;
  color: #323233;
  .coupon-box {
    margin: 20px auto;
    background-color: #fff;
    width: 90%;
    height: 130px;
    border-radius: 7px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    .coupon-top {
      display: flex;
      width: 100%;
      height: 80%;
      border-bottom: 1px dashed #dcdee0;
      .coupon-topleft {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ee0a24;
        height: 100%;
        width: 30%;
        .coupon-discount {
          margin-bottom: 5px;
          p {
            font-weight: 100;
            font-size: 28px;
            span {
              padding-left: 2px;
              font-size: 12px;
            }
          }
        }
        .coupon-threshold {
          font-size: 11px;
          p {
            white-space: pre;
            text-align: center;
          }
        }
      }
      .coupon-topmid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 50%;
        div {
          margin-left: 10px;
        }
        .coupon-name {
          margin-bottom: 10px;
          font-size: 13px;
        }
        .coupon-date {
          font-size: 11px;
          color: #646566;
        }
      }
      .coupon-topright {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        height: 100%;
      }
    }
    .coupon-bottom {
      display: flex;
      align-items: center;
      width: 100%;
      height: 20%;
      .coupon-description {
        margin-left: 22px;
        font-size: 12px;
      }
    }
  }
}
</style>